<template>
	<view class="containers">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" style="height:90vh;">
			<view class="view-check">
				<view class="check">
					<view class="check-item" :class="{'active':active}" @click="handleClickCheck(true)">工程询价</view>
					<view class="check-item" :class="{'active':!active}" @click="handleClickCheck(false)">采购询价</view>
				</view>
			</view>
			<view class="">
				<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
					 label="项目名称" prop="projectName">
						<u-input :border="border" placeholder="请输入" v-model="model.projectName" type="text" input-align="right"></u-input>
					</u-form-item>
					<block v-if="model.type == 1">
						<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="项目类型" prop="projectType">

							<view style="width:100%;text-align: right;" @click="mSelect">{{model.projectType || "请选择"}}</view>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="项目阶段" prop="projectStage">
							<view style="width:100%;text-align: right;" @click="gcjdSelect">{{model.projectStage || "请选择"}}</view>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="项目规模" prop="projectScale">
							<u-input :border="border" placeholder="请输入面积     平方米" v-model="model.projectScale" type="text" input-align="right"></u-input>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="投资额" prop="investment">
							<u-input :border="border" placeholder="请输入金额       万元" v-model="model.investment" type="text" input-align="right"></u-input>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="项目地域" prop="projectRegion"
						 label-width="200">
						 <view style="width:100%;text-align: right;" @click="cityActive = true">{{model.projectRegion || "请选择"}}</view>					
						 
							<!-- <u-input type="select" :select-open="selectShowDy" v-model="model.projectRegion" placeholder="请选择"
							 placeholderStyle="color: #0D1D36;" input-align="right" @click="selectShowDy = true"></u-input> -->
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
						 label="工作周期" prop="projectCycle">

							<u-input type="input" v-model="model.cycle" placeholder="请选择日期" input-align="right" @click="show = true"></u-input>
							<u-calendar v-model="show" ref="calendar" @change="change" mode="range" max-date="2030-10-01">
							</u-calendar>
						</u-form-item>

						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
						 label="项目报价" prop="projectQuoted">
							<u-input :border="border" placeholder="请输入金额  万元" v-model="model.projectQuoted" type="text" input-align="right"></u-input>
						</u-form-item>
					</block>
					<block v-else>
						<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="产品类型" prop="productType">
							<u-input :border="border" placeholder="请输入" v-model="model.productType" type="text" input-align="right"></u-input>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="产品数量" prop="productNum">
							<u-input :border="border" placeholder="请输入" v-model="model.productNum" type="text" input-align="right"></u-input>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="产品规格" prop="productSpec">
							<u-input :border="border" placeholder="请输入" v-model="model.productSpec" type="text" input-align="right"></u-input>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="单价" prop="projectQuoted">
							<u-input :border="border" placeholder="请输入金额  万元" v-model="model.projectQuoted" type="text" input-align="right"></u-input>
						</u-form-item>
					</block>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="保证金" prop="margin">
						<u-input :border="border" placeholder="请输入金额" v-model="model.margin" type="text" input-align="right"></u-input>万元
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="询价时效" prop="expiredTime">
						<u-input type="select" v-model="model.expiredTime" placeholder="请选择" placeholderStyle="color: #0D1D36;"
						 input-align="right" @click="showDate = true"></u-input>
						<u-calendar v-model="showDate" ref="calendar" @change="changeDate" mode="date" :start-text="startText" :end-text="endText"
						 :range-color="rangeColor" max-date="2022-10-01" :range-bg-color="rangeBgColor" :active-bg-color="activeBgColor">
						</u-calendar>
					</u-form-item>
					<view class="sctp u-flex u-m-l-40 u-m-r-30 u-m-t-40 ">

						<text class="hz">规则说明</text>
					</view>
					<u-form-item class="  zwpj u-m-l-30 u-m-r-30 " :label-position="labelPosition" prop="ruleDesc">
						<u-input type="textarea" :border="border" placeholder="请详细说明询价规则" v-model="model.ruleDesc" />
					</u-form-item>
				</u-form>
			</view>
			<view class="u-m-t-20 u-p-30">
				<u-button class="button" @click="onClick">提交</u-button>
				<!--弹出框-->
				<u-select mode="single-column" :list="selectType" v-model="selectShowXmlx" @confirm="selectConfirmXmlx"></u-select>
				<u-select mode="single-column" :list="selectList" v-model="selectShowXmjd" @confirm="selectConfirmXmjd"></u-select>
				<u-select v-model="selectShowDy" mode="mutil-column-auto" :list="listCitys" @confirm="regionConfirm"></u-select>
				<TriTree ref="gcjdTree" :range="fetchDict.progress_stage" @confirm="function (e){return setChooseType(e,'projectStage')}"></TriTree>
				<TriTree ref="triTree" :range="fetchDict.financing_cooperation_project_category" @confirm="function (e){return setChooseType(e,'projectType')}"></TriTree>	 
				<city-select v-model="cityActive" @city-change="cityChange"></city-select>
				<!--弹出框-->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import TriTree from '@/components/tki-tree/tki-tree.vue'
	
	import citySelect from '@/components/u-city-select.vue';
	export default {
		components:{
			citySelect,
			TriTree
		},
		name: "m-inquiry",
		props: {
			datas: Array, //数据
		},
		data() {
			let that = this;
			return {
				cityActive: false,
				fetchDict: [],
				resultDate: '',
				selectShowDy: false,
				showDate: false,
				selectShowQydz: false,
				showCity: false,
				defaultValue: [3],
				listCitys: [],
				mode: 'range',
				result: "开始时间   至   结束时间",
				startText: '开始',
				endText: '结束',
				rangeColor: '#2979ff',
				rangeBgColor: 'rgba(41,121,255,0.13)',
				activeBgColor: '#2979ff',
				show: false,
				selectList: [{
					label: "立项",
					value: '立项'
				}, {
					label: "调研",
					value: '调研'
				}],
				selectType: [{
					label: "工程",
					value: '工程'
				}, {
					label: "招投标",
					value: '招投标'
				}],
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 20,
				marginBottom: 20,
				active: true,
				errorType: ['toast'],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				/**
				 * form验证
				 * */
				model: {
					"area": "",
					"cycle": "",
					"expiredTime": '',
					"investmentAmount": "",
					"margin": "",
					"projectName": "",
					"projectType": "",
					"quotedPrice": "",
					"ruleDesc": "",
					"scale": "",
					"stage": "",
					"type": 1
				},
				rules: {},
				type: 0,
				communeId: 0,
				required: false,
				border: false,
				check: false,
				pickerShow: false,
				selectStatus: 'close',
				selectShowXmlx: false,
				selectShowXmjd: false,
				selectShowScly: false,
				selectShowGzzq: false,
				// selectShowQydy: false,
				// selectShowLyxy: false,
				radio: '',
				radio1: '',
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
				checkboxList: [{
						name: '是',
						checked: false,
						disabled: false
					},
					{
						name: '否',
						checked: false,
						disabled: false
					},
				],
				checkboxList1: [{
						name: '是',
						checked: false,
						disabled: false
					},
					{
						name: '否',
						checked: false,
						disabled: false
					},

				]
			};
		},
		mounted() {},
		onShow() {},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		created: function() {
			var that = this;
			let list = that.datas;
			this.listCitys = list;
			var keys = {
				'keys': ['financing_cooperation_project_category', 'progress_stage', 'people_type']
			}
			this.dictionaryFetchDict(keys);
		},
		methods: {	
			cityChange(e) {
				let address = e.province.label
				if(e.city){
					address = address + '-' + e.city.label;
				}
				if(e.area){
					address = address + '-' + e.area.label;
				}
				this.model.projectRegion = address
			},
			mSelect() {
				this.$refs.triTree._show()
			},
			setChooseType(item, type) {
				var column_array = this.$mUtils.array_column(item, 'label');
				var modelValue = column_array.join(',');
				this.model[type] = modelValue;
				this.$forceUpdate()
			},
			async dictionaryFetchDict(keyWords) {
				let result = await this.$apis.fetchMultipleKey(keyWords);
				this.fetchDict = result.data;
			},
			gcjdSelect() {
				this.$refs.gcjdTree._show()
			},
			changeDate(e) {
				this.model.expiredTime = e.result;
			},
			change(e) {
				if (this.mode == 'range') {
					this.model.cycle = e.startDate + " - " + e.endDate;
					this.startTime = e.startDate;
					this.endTime = e.endDate;
				} else {
					this.model.cycle = e.result;
				}
			},
			handleClickCheck(e) {
				if (e) {
					this.model.type = 1
				} else {
					this.model.type = 2
				}

				this.active = e
			},
			regionConfirm(e) {
				this.model.projectRegion = '';
				e.map((val, index) => {
					this.model.projectRegion += this.model.projectRegion == '' ? val.label : '-' + val.label;
				})
			},
			selectConfirmXmlx(e) {
				this.model.projectType = '';
				e.map((val, index) => {
					this.model.projectType += this.model.projectType == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmXmjd(e) {
				this.model.stage = '';
				e.map((val, index) => {
					this.model.stage += this.model.stage == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmGzzq(e) {
				this.model.gzzq = '';
				e.map((val, index) => {
					this.model.gzzq += this.model.gzzq == '' ? val.label : '-' + val.label;
				});
			},
			onClick() {
				this.$emit('click', {
					model: this.model
				})
			}
		}

	}
</script>

<style scoped lang="scss">
	.view-check {
		margin-top:30rpx;
		background-color: #fff;
		height: 110rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// border-bottom: #f4f4f4 solid 1rpx;

		.check {
			width: 460rpx;
			height: 64rpx;
			display: flex;
			background-color: #F0F0F0;
			border-radius: 32rpx;

			.check-item {
				width: 230rpx;
				text-align: center;
				line-height: 64rpx;
				border-radius: 32rpx;
				color: #0E1E36;
			}

			.active {
				color: #fff;
				background-color: #AB62FF;
			}
		}
	}

	.zwpj {
		width: 690rpx;
		height: 260rpx;
		background-color: #F5F5F9;
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}

	.hz {
		color: #0D1D36;
		font-size: 30rpx;
		margin-left: 15rpx;
	}

	.button {
		width: 662rpx;
		margin: 132rpx auto 78rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;

		&.u-hairline-border:after {
			border: 0;
		}
	}
</style>
